<template>
    <div class="app-container">
        <el-card class="box-card components-container">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="任务名称">
                    <el-input v-model="form.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="所属课程">
                    <el-input v-model="form.courseName" readonly></el-input>
                </el-form-item>
                <el-form-item label="所属单元">
                    <el-input v-model="form.unitName" readonly></el-input>
                </el-form-item>
                <el-form-item label="任务描述">
                    <editor v-model="form.remark" :min-height="192" disabled />
                    <!-- <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" v-model="form.remark"
                        readonly></el-input> -->
                </el-form-item>
                <el-form-item label="初始HTML代码" prop="initHtmlCode">
                    <!-- <editor v-model="form.resultCode" :min-height="20" /> -->
                    <codemirror :options="cmHtmlOption" v-model="form.initHtmlCode" ref="initHtmlCode" />
                </el-form-item>
                <el-form-item label="结果HTML代码" prop="resultCode">
                    <!-- <editor v-model="form.resultCode" :min-height="20" /> -->
                    <codemirror :options="cmHtmlOption" v-model="form.resultCode" ref="resultCode" />
                </el-form-item>
                <el-form-item label="初始CSS代码" prop="initCssCode">
                    <!-- <editor v-model="form.resultCode" :min-height="20" /> -->
                    <codemirror :options="cmHtmlOption" v-model="form.initCssCode" ref="initCssCode" />
                </el-form-item>
                <el-form-item label="结果CSS代码" prop="resultCssCode">
                    <!-- <editor v-model="form.resultCode" :min-height="20" /> -->
                    <codemirror :options="cmHtmlOption" v-model="form.resultCssCode" ref="resultCssCode" />
                </el-form-item>
                <el-form-item label="初始JS代码" prop="initJsCode">
                    <!-- <editor v-model="form.resultCode" :min-height="20" /> -->
                    <codemirror :options="cmJSOption" v-model="form.initJsCode" ref="initJsCode" />
                </el-form-item>
                <el-form-item label="结果JS代码" prop="resultJsCode">
                    <!-- <editor v-model="form.resultCode" :min-height="20" /> -->
                    <codemirror :options="cmJSOption" v-model="form.resultJsCode" ref="resultJsCode" />
                </el-form-item>
                <el-form-item label="效果图片">
                    <!-- <image-upload v-model="form.resultImage" disabled />
                    <el-image v-model="form.resultImage" disabled /> -->
                    <el-image style="width: 100px; height: 100px" :src="form.resultImage"
                        :preview-src-list="form.srcList"></el-image>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="form.createTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <template slot-scope="scope">
                        <el-switch v-model="form.validFlag" :active-value="1" :inactive-value="0" disabled></el-switch>
                    </template>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>返回</el-button>
                </el-form-item> -->
            </el-form>
        </el-card>

    </div>
</template>
  
<script>
import { getTask } from "@/api/student/task";
import { codemirror } from 'vue-codemirror'
import "@/api/student/setting";
export default {
    name: "taskDetail",
    data() {
        return {
            editorKey: "",
            form: {
                name: '',
                courseName: '',
                unitName: '',
                creatorName: '',
                createTime: '',
                remark: '',
                resultCode: '',
                resultImage: '',
                validFlag: '',
                srcList: [],
                initCssCode: '',
                initJsCode: '',
                resultJsCode: '',
                resultCssCode: '',
                initHtmlCode: ''
            },
            // html 代码 codemirror 配置项
            cmHtmlOption: {
                lint: true, // 开启语法检查
                // tab宽度
                tabSize: 4,
                indentUnit: 4,
                foldGutter: true,
                // 高亮行功能
                styleActiveLine: true,
                // 调整scrollbar样式功能
                // scrollbarStyle: "overlay",
                // 自动括号匹配功能
                matchBrackets: true,
                // 显示行数
                lineNumbers: true,
                line: true,
                // 软换行
                lineWrapping: true,
                // 主题
                theme: "cobalt",
                keyMap: "sublime",
                // 只读
                readOnly: 'nocursor',
                // 语言及语法模式
                mode: {
                    name: "htmlmixed",
                    scriptTypes: [
                        {
                            matches: /\/x-handlebars-template|\/x-mustache/i,
                            mode: null,
                        },
                        {
                            matches: /(text|application)\/(x-)?vb(a|script)/i,
                            mode: "vbscript",
                        },
                    ],
                },
                collapseIdentical: false,
                highlightDifferences: true,
                viewportMargin: Infinity,
                // 代码提示功能
                hintOptions: {
                    // 避免由于提示列表只有一个提示信息时，自动填充
                    completeSingle: false,
                },
            },
            cmJSOption: {
                tabSize: 2, // tab
                styleActiveLine: true, // 高亮选中行
                lineNumbers: true, // 显示行号
                styleSelectedText: true,
                line: true,
                foldGutter: true, // 块槽
                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
                mode: { // 模式, 可查看 codemirror/mode 中的所有模式
                    name: 'javascript',
                    json: true
                },
                // hint.js options
                hintOptions: {
                    // 当匹配只有一项的时候是否自动补全
                    completeSingle: false
                },
                // 快捷键 可提供三种模式 sublime、emacs、vim
                keyMap: 'sublime',
                matchBrackets: true,
                showCursorWhenSelecting: true,
                theme: 'monokai', // 主题 
                extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
                // 只读
                readOnly: 'nocursor'
            }
        }
    },
    created() {
        this.getTaskDetail();
    },
    activated() {
        // 在页面被激活时执行的逻辑  
        this.$nextTick(() => {
            this.setCodemirrorValue();
        });
    },
    watch: {
        '$route.params': {
            immediate: true,
            handler() {
                console.log(this.$route.name);
                if (this.$route.name == 'taskDetail') {
                    this.getTaskDetail().$nextTick(() => {
                        this.setCodemirrorValue();
                    });
                    
                }
            }
        }
    },
    methods: {
        getTaskDetail() {
            var id = this.$route.query.id;
            getTask(id).then(response => {
                response.data.resultImage = "/dev-api" + response.data.resultImage
                response.data.srcList = [response.data.resultImage];
                // /profile/upload/2023/09/09/木门_20230909235902A001.jpg
                this.form = response.data;
                console.log(this.form);

            });
        },

        setCodemirrorValue() {
            const initHtmlCodeEditor = this.$refs.initHtmlCode.codemirror;
            const initCssCodeEditor = this.$refs.initCssCode.codemirror;
            const initJsCodeEditor = this.$refs.initJsCode.codemirror;
            const resultCodeEditor = this.$refs.resultCode.codemirror;
            const resultCssCodeEditor = this.$refs.resultCssCode.codemirror;
            const resultJsCodeEditor = this.$refs.resultJsCode.codemirror;
            if(this.form.initHtmlCode==null){
                this.form.initHtmlCode = "";
            }
            if(this.form.initCssCode==null){
                this.form.initCssCode = "";
            }
            if(this.form.initJsCode==null){
                this.form.initJsCode = "";
            }
            if(this.form.resultCode==null){
                this.form.resultCode = "";
            }
            if(this.form.resultCssCode==null){
                this.form.resultCssCode = "";
            }
            if(this.form.resultJsCode==null){
                this.form.resultJsCode = "";
            }
            initHtmlCodeEditor.setValue(this.form.initHtmlCode);
            initCssCodeEditor.setValue(this.form.initCssCode);
            initJsCodeEditor.setValue(this.form.initJsCode);
            resultCodeEditor.setValue(this.form.resultCode);
            resultCssCodeEditor.setValue(this.form.resultCssCode);
            resultJsCodeEditor.setValue(this.form.resultJsCode);
        }
    }
};
</script>
  